<template>
	<view class="content">
		<!-- 顶部欢迎语 -->
		<view class="welcome">{{ message }}</view>

		<!-- 食材选择区 -->
		<view class="section">
			<view class="section-title">🔍 先选一下食材</view>
			<view class="sub-title">🥬 菜菜们</view>
			<view class="tags">
				<view v-for="item in vegetables" :key="item.text" :class="['tag', isSelected(item.text, selectedVegetables) ? 'selected vegetable' : 'vegetable']" @click="toggleSelection(item.text, 'vegetables')">
					{{ item.emoji }} {{ item.text }}
				</view>
			</view>
			<view class="sub-title">🍖 肉肉们</view>
			<view class="tags">
				<view v-for="item in meats" :key="item.text" :class="['tag', isSelected(item.text, selectedMeats) ? 'selected meat' : 'meat']" @click="toggleSelection(item.text, 'meats')">
					{{ item.emoji }} {{ item.text }}
				</view>
			</view>
			<view class="sub-title">🍚 主食也要一起下锅吗？（不选也行）</view>
			<view class="tags">
				<view v-for="item in staples" :key="item.text" :class="['tag', isSelected(item.text, selectedStaples) ? 'selected staple' : 'staple']" @click="toggleSelection(item.text, 'staples')">
					{{ item.emoji }} {{ item.text }}
				</view>
			</view>
			<view class="sub-title">🔍 再选一下厨具</view>
			<view class="tags">
				<view v-for="item in utensils" :key="item.text" :class="['tag', isSelected(item.text, selectedUtensils) ? 'selected utensil' : 'utensil']" @click="toggleSelection(item.text, 'utensils')">
					{{ item.emoji }} {{ item.text }}
				</view>
			</view>
		</view>

		<!-- 占位让按钮到底部 -->
		<view style="flex:1" />

		<!-- 底部按钮区 -->
		<view class="bottom-btn-area">
			<button class="main-btn" @click="goToRecipe">来看看组合出的菜谱吧！</button>
		</view>

		<!-- 底部导航栏 -->
		<view class="tabbar">
			<view class="tabbar-item active">
				<text class="tabbar-emoji">🏠</text>
				<text class="tabbar-label">首页</text>
			</view>
			<view class="tabbar-item" @click="goTo('recipe-test')">
				<text class="tabbar-emoji">🍽️</text>
				<text class="tabbar-label">吃什么</text>
			</view>
			<view class="tabbar-item" @click="goTo('my')">
				<text class="tabbar-emoji">👤</text>
				<text class="tabbar-label">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				message: '好的，今天我们来做菜！',
				selectedVegetables: [],
				selectedMeats: [],
				selectedStaples: [],
				selectedUtensils: [],
				vegetables: [
					{ text: '土豆', emoji: '🥔' },
					{ text: '胡萝卜', emoji: '🥕' },
					{ text: '花菜', emoji: '🥦' },
					{ text: '白萝卜', emoji: '🥗' },
					{ text: '西葫芦', emoji: '🥒' },
					{ text: '茄子', emoji: '🍆' },
					{ text: '芹菜', emoji: '🥬' },
					{ text: '黄瓜', emoji: '🥒' },
					{ text: '洋葱', emoji: '🧅' },
					{ text: '菌菇', emoji: '🍄' },
					{ text: '茴子', emoji: '🌱' },
					{ text: '豆腐', emoji: '🧊' },
					{ text: '包菜', emoji: '🥬' },
					{ text: '白菜', emoji: '🥬' }
				],
				meats: [
					{ text: '牛肉', emoji: '🥩' },
					{ text: '香肠', emoji: '🌭' },
					{ text: '腊肠', emoji: '🥓' },
					{ text: '鸡肉', emoji: '🍗' },
					{ text: '猪肉', emoji: '🥩' },
					{ text: '鸡蛋', emoji: '🥚' },
					{ text: '虾', emoji: '🦐' },
					{ text: '骨头', emoji: '🦴' },
					{ text: '鱼', emoji: '🐟' }
				],
				staples: [
					{ text: '面条', emoji: '🍜' },
					{ text: '面包', emoji: '🍞' },
					{ text: '米', emoji: '🍚' },
					{ text: '方便面', emoji: '🍜' }
				],
				utensils: [
					{ text: '烤箱', emoji: '🧑‍🍳' },
					{ text: '空气炸锅', emoji: '🔥' },
					{ text: '微波炉', emoji: '📱' },
					{ text: '电饭煲', emoji: '🍚' },
					{ text: '一口能炒又能煮的大锅', emoji: '🥘' }
				]
			}
		},
		onLoad() {

		},
		methods: {
			isSelected(text, arr) {
				return arr.includes(text)
			},
			toggleSelection(text, type) {
				const key = {
					vegetables: 'selectedVegetables',
					meats: 'selectedMeats',
					staples: 'selectedStaples',
					utensils: 'selectedUtensils'
				}[type]
				if (this[key].includes(text)) {
					this[key] = this[key].filter(item => item !== text)
				} else {
					this[key].push(text)
				}
			},
			goToRecipe() {
				// 跳转到组合菜谱页，传递所选内容
				const params = {
					vegetables: this.selectedVegetables,
					meats: this.selectedMeats,
					staples: this.selectedStaples,
					utensils: this.selectedUtensils
				}
				uni.navigateTo({
					url: '/pages/recipe-result/recipe-result?params=' + encodeURIComponent(JSON.stringify(params))
				})
			},
			goTo(page) {
				if (page === 'recipe-test') {
					uni.redirectTo({ url: '/pages/recipe-test/recipe-test' })
				} else if (page === 'my') {
					uni.redirectTo({ url: '/pages/my/my' })
				} else if (page === 'index') {
					uni.redirectTo({ url: '/pages/index/index' })
				}
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background: #fff;
	}

	.welcome {
		font-size: 22px;
		font-weight: bold;
		text-align: center;
		margin: 32rpx 0 24rpx 0;
	}

	.section {
		padding: 0 24rpx;
	}

	.section-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.sub-title {
		font-size: 16px;
		margin: 18rpx 0 8rpx 0;
	}

	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 12rpx;
		margin-bottom: 8rpx;
	}

	.tag {
		padding: 10rpx 24rpx;
		border-radius: 20rpx;
		border: 2rpx solid #eee;
		background: #f8f8f8;
		font-size: 15px;
		margin-bottom: 8rpx;
		cursor: pointer;
		user-select: none;
		transition: all 0.2s;
	}

	.vegetable {
		border-color: #66BB6A;
	}

	.meat {
		border-color: #EF5350;
	}

	.staple {
		border-color: #FFA726;
	}

	.utensil {
		border-color: #42A5F5;
	}

	.selected.vegetable {
		background: #2E7D32;
		color: #fff;
		border-color: #1B5E20;
	}

	.selected.meat {
		background: #C62828;
		color: #fff;
		border-color: #B71C1C;
	}

	.selected.staple {
		background: #EF6C00;
		color: #fff;
		border-color: #E65100;
	}

	.selected.utensil {
		background: #1565C0;
		color: #fff;
		border-color: #0D47A1;
	}

	.bottom-btn-area {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 32rpx 0 24rpx 0;
	}

	.main-btn {
		width: 80vw;
		height: 90rpx;
		background: #ff7043;
		color: #fff;
		font-size: 18px;
		font-weight: bold;
		border-radius: 45rpx;
		box-shadow: 0 4rpx 16rpx #ffab91;
		border: none;
	}

	.tabbar {
		display: flex;
		flex-direction: row;
		height: 100rpx;
		background: #fff;
		border-top: 2rpx solid #E0E0E0;
	}

	.tabbar-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #888;
		font-size: 14px;
	}

	.tabbar-item.active {
		color: #1976D2;
		font-weight: bold;
	}

	.tabbar-emoji {
		font-size: 24px;
	}

	.tabbar-label {
		font-size: 12px;
		margin-top: 4rpx;
	}
</style>
